<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
        <view v-if="isCanUse">
            <view>
                <view class='header'>
                    <image :src='wechatURL'></image>
                </view>
                <view class='content'>
                    <view>微信用户登录授权</view>
					<view class="tips">
						<radio-group @change="radioChange">
							<radio value="agree" class="agree-radio" color="#3c9cff" />
							请您使用前仔细阅读
							<span class="policy" @click="showPolicy">《隐私政策》</span>
							，若您点击“同意授权”即表示您同意
							<span class="policy" @click="showPolicy">《隐私政策》</span>
							的全部内容，开始使用我们的平台。
						</radio-group>
					</view>
                </view>

            <!--
                <button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="login" :loading="loading" :disabled="disabled">
                    授权登录
                </button>
            -->
				<view style="width: 90%;margin: 0 auto;">
					<u-button type='primary' shape="square" openType="getUserInfo" @click="getuserinfo" :loading="loading" :disabled="disabled">
					    同意授权
					</u-button>
				</view>

            </view>
        </view>
        <!-- #endif -->

		<!-- 获取手机号 -->
		<login-modal :is-show="isShow"></login-modal>
		
		<!-- 完善用户信息：昵称和头像 -->
		<div>
			<u-overlay :show="ShowEditUserInfo">
				<div class="slot-content">
					<div class="u-page u-general-color border-r-15">
						<div class="u-center user-head-bg border-r-15" style="padding-top: 130rpx;">
							<button class="aui-flex-user" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<img :src="avatarUrl" alt="">
								<span class="aui-flex-vip">
									<u-icon name="camera-fill" color="#e55e97" size="30"></u-icon>
								</span>
							</button>
						</div>
						<div class="u-mt-20 u-ml-20 u-mr-20" style="border-radius: 15rpx;">
							<div class="u-flex" style="padding: 15rpx 20rpx;background: #fff;">
								<div class="u-pr-5 u-fz-15" style="color: #868585;height: 76rpx;line-height: 76rpx;">昵称</div>
								<div style="width: 85%;">
									<u-input v-model="nickName" type="nickname" height="76rpx" :border="false"></u-input>
								</div>
							</div>
						</div>
						<div class="u-mt-30 u-pl-20 u-pr-20">
							<div style="display: flex;justify-content: space-between;">
								<div class="" style="width: 100rpx;height: 100rpx;border-radius: 10rpx;">
									<u-icon name="weixin-fill" color="#4dc822" size="50"></u-icon>
								</div>
								<div style="width: 78%;font-size: 24rpx;">
									为保障您在平台能够顺利参与工作，赚取劳动报酬，我们建议您使用与当前微信一致的头像和昵称！
								</div>
							</div>
						</div>
						<div class="u-pt-30 u-pb-20 u-pl-20 u-pr-20">
							<u-button type="primary" color="#e55e97" @click="ConfirmEditUserInfo">确定使用</u-button>
						</div>
					</div>
				</div>
			</u-overlay>
			<!-- <u-modal
			  ref="uModal"
			  :show="ShowEditUserInfo"
			  :closeOnClickOverlay="true"
			  :showConfirmButton="false"
			  width="600rpx"
			>
				<div class="slot-content">
					<div class="u-page u-general-color">
						<div class="u-center user-head-bg" style="padding-top: 130rpx;">
							<button class="aui-flex-user" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<img :src="avatarUrl" alt="">
								<span class="aui-flex-vip">
									<u-icon name="camera-fill" color="#e55e97" size="30"></u-icon>
								</span>
							</button>
						</div>
						<div class="u-mt-20 u-ml-20 u-mr-20" style="border-radius: 15rpx;">
							<div class="u-flex" style="padding: 15rpx 20rpx;background: #fff;">
								<div class="u-pr-5 u-fz-15" style="color: #868585;height: 76rpx;line-height: 76rpx;">昵称</div>
								<div style="width: 85%;">
									<u--input v-model="nickName" type="nickname" border="none" height="76rpx" @blur="changeNickName"></u--input>
								</div>
							</div>
						</div>
						<div class="u-mt-30 u-pl-20 u-pr-20">
							<div style="display: flex;justify-content: space-between;">
								<div class="" style="width: 100rpx;height: 100rpx;border-radius: 10rpx;">
									<u-icon name="weixin-fill" color="#4dc822" size="50"></u-icon>
								</div>
								<div style="width: 78%;font-size: 24rpx;">
									为保障您在平台能够顺利参与工作，赚取劳动报酬，我们建议您使用与当前微信一致的头像和昵称！
								</div>
							</div>
						</div>
						<div class="u-pt-30 u-pb-20 u-pl-20 u-pr-20">
							<u-button type="primary" color="#e55e97" @click="ConfirmEditUserInfo">确定使用</u-button>
						</div>
					</div>
				</div>
			</u-modal> -->
		</div>
		
		<!-- 隐私政策 -->
		<u-modal :show="policy_show" confirm-text="已知晓" title="隐私政策" @confirm="closePolicyShow">
			<div class="slot-content2">
				<scroll-view scroll-y="true" style="height: 800rpx;">
					<div>为切实保护用户个人信息，广州市开放邑软件科技有限公司（以下或称“我们”）根据现行法规及政策，就“玫丽女性工作平台”制定《隐私政策》（“本隐私政策”）。本隐私政策适用于我们通过“玫丽女性工作平台”向您提供的所有服务，以及使用“玫丽女性工作平台”的全部用户。</div>
					<div>我们深知个人信息对您的重要性，并会尽全力提供安全可靠的个人信息保护服务，并将恪守以下原则：权责一致原则、目的明确原则、选择同意原则、最少够用原则、确保安全原则、主体参与原则、公开透明原则等。</div>
					<div>请在使用“玫丽女性工作平台”前仔细阅读并了解本《隐私政策》。</div>
					<div class="u-font-bold">一、我们如何收集和使用您的个人信息</div>
					<div>“玫丽女性工作平台”仅会出于必要的业务场景，收集和使用您的个人信息 ，以便向你提供对应的服务，若您不提供相关的个人信息，将无法享受相应的服务内容，以下为部分场景及其获取信息示例。</div>
					<div>产品功能：在使用存储服务时，会获取一些必要信息。如：获取您的手机号码用于注册；获取您的手机存储状态用于创建本地目录；在使用照片、视频、文件和通讯录等备份功能时和文件预览及传输时，读取对应的本地文件信息；查看网络状态用于登录和绑定设备。</div>
					<div>系统权限：为提供更好的服务体验，我们会向您申请一些系统权限。如：获取存储权限用于 传输文件；获取相机权限用于拍照上传和扫一扫；获取麦克风权限用于绑定对应设备的语音对讲。</div>
					<div>您的个人信息大部分是由您主动向我们提供或授权的，也有我们在您使用我们的产品或服务时通过Cookies、SDK及类似技术获取的。我们会采取一切合理可行的措施，保护您在平台内的个人信息。</div>
					<div class="u-font-bold">二、我们如何使用Cookie和同类技术</div>
					<div>为确保小程序正常运转，我们会在您的移动设备上存储名为Cookie的小数据文件。Cookie通常包含标识符、站点名称以及一些号码和字符。借助于Cookie，网站能够存储您的偏好或购物篮内的商品等数据。</div>
					<div>我们不会将Cookie用于本隐私政策所述目的之外的任何用途。您可根据自己的偏好管理或删除Cookie。</div>
					<div class="u-font-bold">三、个人信息的共享、转让、公开披露</div>
					<div>我们不会向“玫丽女性工作平台”以外的任何公司、组织和个人分享或向其转让，或公开披露您的个人信息。</div>
					<div class="u-font-bold">四、您的权利</div>
					<div>按照中国相关的法律、法规、标准，我们保障您对自己的个人信息行使法定权利。</div>
					<div class="u-font-bold">五、对未成年人个人信息的特别保护</div>
					<div>我们不会收集包括未成年人在内的个人信息。尽管当地法律和习俗对儿童的定义不同，但我们将不满14周岁的任何人均视为儿童。</div>
					<div class="u-font-bold">六、您的个人信息如何在全球范围转移</div>
					<div>我们不会将您的个人信息转移到除中国（仅为本隐私政策之目的，不含香港、澳门与台湾地区）外的其他国家／地区。</div>
					<div class="u-font-bold">七、本隐私政策如何更新</div>
					<div>我们可能会不时地更新本隐私政策。未经您明示同意，我们不会削减您在本隐私政策所享有的权利。我们会在本页面发布对本隐私政策所做的任何变更。</div>
					<div>对于重大变更，我们会向您提供显著的通知。</div>
					<div>
						<p>本隐私政策所指的重大变更包括但不限于：</p>
						<p>1、我们的服务模式发生重大变化。例如收集、处理、使用、共享您的个人信息；</p>
						<p>2、您参与个人信息处理方面的权利及其行使方式发生重大变化；</p>
						<p>3、我们负责处理个人信息安全的联络方式及投诉渠道发生变化时。</p>
					</div>
					<div class="u-font-bold">八、如何联系我们</div>
					<div>如果您对本隐私政策有任何疑问、意见或建议，请通过以下方式联系我们：</div>
					<div>邮箱：【perpartner@openea.net】</div>
					<div>一般情况下，我们将在十五个工作日内回复您的疑问、意见或建议。</div>
					<div>如果您对我们的回复不满意，特别是认为我们的个人信息处理行为损害了您的合法权益，请务必告知我们。</div>
				</scroll-view>
			</div>
		</u-modal>
    </view>
</template>

<script>
	import globalData from "@/globalData";
	import COS from "@/common/js/cos-wx-sdk-v5.min.js";
    export default {
        data() {
            return {
                loading: false,
                disabled: false,
                SessionKey: '',
                OpenId: '',
				code: '',
                nickName: '',
                avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
                isCanUse: uni.getStorageSync('isCanUse')||true,//默认为true
				isShow: false,
				wechatURL: globalData.imgURL + 'wechat.png',
				ShowEditUserInfo: false,//弹窗修改用户信息标志
				UserInfo: {},
				status: '',
				policy_show: false,
				isBack: '',//是否登录完成后返回上一页
				agreePolicy: 0//是否同意隐私政策
            };
        },
        methods: {
			
		  /** 
		   * @param {Object} code
		   * 初始化用户信息（如果为新用户调用该接口后会在用户系统中注册一个用户并返回用户信息，如果为老用户则直接返回用户信息）
		   */
		  async initUserInfo(code){
			  let result = await this.$u.api.unifyMiniRest({
			  	systemid: "sso", //必须，系统名称，这里不同的系统对接请求地址的域名前串不同，各请求地址统一写在一个全局配置文件中
			  	url: "/applets/thirdParty/login", //必须，接口请求地址
				appletId: "seastarspace",
			  	code: code
			  });
			  if(this.isNotNull(result)){
				  this.UserInfo = result.data
				  this.status = result.status
				  if(!result.isNewUser){
					  this.nickName = this.UserInfo.nickName
					  this.avatarUrl = this.UserInfo.avatarUrl
				  }
				  this.ShowEditUserInfo = true
			  }else{
				  this.showMSG('none','登录失败')
			  }
		  },

          async sendLogin(code,nickName,avatarUrl) {
			
			let result = await this.$u.api.unifyMiniRest({
				systemid: "sso", //必须，系统名称，这里不同的系统对接请求地址的域名前串不同，各请求地址统一写在一个全局配置文件中
				url: "/applets/thirdParty/login", //必须，接口请求地址
				appletId: "seastarspace",
				code: code,
				nickName: nickName,
				avatarUrl: avatarUrl,
				userId: this.UserInfo.userId,
				openId: this.UserInfo.openid,
				unionId: this.UserInfo.unionid,
				status: this.status
			});

            if(this.isNotNull(result)){
				if(!this.isNotNull(result.data.userId)){
					this.showMSG('none','登录失败，请重新登录')
					this.loading = false
					this.disabled = false
					return
				}
                this.UserInfo = result.data
                this.SET_USER_INFO(this.UserInfo)
                uni.setStorageSync('isCanUse', false);
                this.loading = false
                this.disabled = true
				uni.navigateBack({delta: 1});
            }else{
				this.loading = false
				this.disabled = false
				this.showMSG('none','登录失败')
			}
			
          },

            login(authDetail) {
                let _this = this
				uni.login({
					success(res) {
                        _this.code = res.code
						console.log(res,'取code成功');
                        // 调用自定义服务器方法...
						_this.initUserInfo(_this.code)
					},
					fail(err) {
						console.log('获取code失败',err)
					}
				})
            },
            getuserinfo(e) {
				let _this = this
				if(_this.agreePolicy == 1){
					uni.getUserProfile({
						desc:'weixin',
						success:res=>{
							_this.login(res)
							console.log(res,'授权成功');
						},
						fail:err=>{
							console.log(err,'失败授权')
					        uni.reLaunch({url:'/pages/index/index'})
						}
					})
				}else{
					this.showMSG('none','请选择同意条款！')
				}
            },
			
			/** 
			 * 头像上传
			 */
			onChooseAvatar(e){
				let _this = this
				// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
				const Cos = new COS({
					SecretId: globalData.CosSecretId,
					SecretKey: globalData.CosSecretKey,
				});
				//解析原头像地址的随机值，重新生成随机值的时候排除原地址随机值，避免地址相同导致虽然图片已经上传但前端检测不到地址变化不更新头像
				// let ramdom_sault = _this.getRamdomSault(_this.avatarUrl)
				let folderName = "perpartner/UserAvatar/";
				let upload_fileName = _this.UserInfo.userId + '_' + _this.guid() + '.png'
				Cos.postObject({
				    Bucket: globalData.CosBucket,
				    Region: globalData.CosRegion,
				    Key: folderName + upload_fileName,// 文件夹+文件名称
				    FilePath: e.detail.avatarUrl,
				    onProgress: function (info) {
				        console.log(JSON.stringify(info));
				    }
				}, function (err, data) {
				    console.log(err || data);
					if(data){
						// data.Location返回的路径，会转成%之类的，导致不能直接访问，所以路径需要自己拼
						// let backUrl = "https://" + data.Location;
						let backUrl = "https://" + globalData.CosBucket + ".cos."+ globalData.CosRegion + ".myqcloud.com/" + folderName + upload_fileName;
						_this.avatarUrl = backUrl
					}else{
						_this.showMSG('none','头像上传失败，请重新上传')
					}
				});
			},
			
			/**
			 * 确定完善用户信息进行sso登录
			 */
			ConfirmEditUserInfo(){
				let _this = this
				if(_this.isNotNull(_this.nickName) && _this.isNotNull(_this.avatarUrl)){
					_this.ShowEditUserInfo = false
					_this.disabled = true
					_this.loading = true
					//请求登录接口
					_this.sendLogin(_this.code,_this.nickName,_this.avatarUrl)
				}else{
					_this.showMSG('none','须上传头像和填写昵称才能进行登录噢')
				}
				
			},
			
			/** 
			 * 解析原头像地址的随机值，重新生成随机值的时候排除原地址随机值，避免地址相同
			 */
			getRamdomSault(avatar_url){
				let sault = 0
				if(this.isNotNull(avatar_url)){
					//查找.png前两个字符是否为"_"
					let flag = avatar_url.substring(avatar_url.indexOf('.png')-2,avatar_url.indexOf('.png')-1)
					if(flag == "_"){
						sault = avatar_url.substring(avatar_url.indexOf('.png')-1,avatar_url.indexOf('.png'))
						if(sault == 0){
							sault = 1
						}else{
							sault = 0
						}
					}
				}
				return sault
			},
			
			/** 
			 * 隐私政策弹窗
			 */
			showPolicy() {
				this.policy_show = true
			},
			
			/** 
			 * 同意隐私政策
			 */
			radioChange(e) {
				if(e.detail.value == 'agree') {
					this.agreePolicy = 1
				}
			},

			changeNickName(e) {
				this.nickName = e
			},

			/**
			 * 关闭隐私政策弹窗
			 */
			 closePolicyShow() {
				this.policy_show = false
			 }
			
        },
        onLoad(options) {//默认加载
            const userInfo = uni.getStorageSync('userInfo')
            if(userInfo !== ''){
				uni.reLaunch({url:'/pages/index/index'})
                return false
            }
			if(this.isNotNull(options.isBack)){
				this.isBack = options.isBack
			}
        }
    }
</script>

<style lang="scss" scoped>
    .header {
        /* margin: 90rpx 0 90rpx 50rpx; */
        /* border-bottom: 1px solid #ccc; */
		padding-top: 120rpx;
        text-align: center;
        /* width: 650rpx; */
        /* height: 300rpx; */
        /* line-height: 450rpx; */
    }

    .header image {
        width: 200rpx;
        height: 200rpx;
		margin: 0 auto;
    }

    .content {
        /* margin-left: 50rpx; */
		margin-top: 50rpx;
        margin-bottom: 90rpx;
		text-align: center;
    }

    .content .tips {
		display: block;
		color: #9d9d9d;
		padding-top: 40rpx;
		width: 90%;
		margin: 0 auto;
		font-size: 26rpx;
		text-align: left;
    }

    .bottom {
        border-radius: 80rpx;
        margin: 70rpx 50rpx;
        font-size: 35rpx;
    }
	
	.aui-flex-user {
	    width: 140rpx;
	    height: 140rpx;
	    margin-right: 15px;
	    position: relative;
		border: 0;
		border: none;
		outline: none;
		margin: 0;
		padding: 0;
		overflow: visible;
		border-radius: 100%;
		padding-left: 0;
		padding-right: 0;
		line-height: 0;
	}
	
	.aui-flex-user::after {
		border: none;
	}
	
	.aui-flex-vip {
	    width: 50rpx;
	    height: 50rpx;
	    display: block;
	    position: absolute;
	    right: -8rpx;
	    top: 100rpx;
	}
	
	.aui-flex-user img {
	    width: 140rpx;
	    height: 140rpx;
	    display: block;
	    border: 1px solid #fff;
	    border-radius: 100%;
	}
	
	.aui-flex-gradual {
	    background-image: -webkit-gradient(linear,left top,right top,from(#fe941f),to(#ffbf56));
	    background-image: -webkit-linear-gradient(left,#fe941f,#ffbf56);
	    background-image: -moz-linear-gradient(left,#fe941f,#ffbf56);
	    background-image: linear-gradient(to right,#fe941f,#ffbf56);
	    background-color: #ffbf56;
	    padding: 40px 15px;
	}
	
	.aui-flex-vip img {
	    width: 100%;
	    height: auto;
	    display: block;
	    border: none;
	    border-radius: 0;
	}
	
	.user-head-bg {
		background: url("/static/images/improveinfo.png") no-repeat left top / 100%;
	}
	
	.policy {
		font-weight: bold;
		text-decoration: underline;
	}
	
	.slot-content2 {
		font-size: 28rpx;
		text-align: left;
		width: 93%;
		margin: 0 auto;
		padding-bottom: 20rpx;
	}
	
	.slot-content2 div {
		padding-top: 30rpx;
	}
	
	.agree-radio {
	  margin-right: 10rpx;
	  width: 40rpx;
	  transform:scale(0.8);
	}
	
	.u-modal__content {
		padding: 0 !important;
	}

	.u-input {
		height: 76rpx !important;
	}

	.slot-content {
		width: 600rpx;
		height: 766rpx;
		border-radius: 20rpx;
		position: absolute;
		top: 18%;
		left: 50%;
		margin-left: -300rpx;
	}

	.border-r-15 {
		border-radius: 15rpx;
	}

</style>
